import React, { useState, useRef } from 'react'

// 目标：点击按钮开启倒计时
// 问题：多次点击会开启多个定时器来控制 count，出问题了
// 解决：开启定时器之前，把上一个定时器给清除了，保证永远只有一个定时器来控制 count 的变化
export default function App() {
  // useRef 生成的对象，能实现多次渲染之间共享同一份数据
  // 你可以把 timerRef 想象成全局变量，但是和全局变量不一样的是：多个组件实例之间不会相互影响
  // !#1 创建 ref 引用
  const timerRef = useRef(null) // { current: null }
  const [count, setCount] = useState(10)
  const handleClick = () => {
    // !#2
    clearInterval(timerRef.current)
    // !#3
    timerRef.current = setInterval(() => {
      setCount((count) => count - 1)
    }, 1000)
  }
  return (
    <div>
      <h3>{count}</h3>
      <button onClick={handleClick}>开启倒计时</button>
    </div>
  )
}
